<template>
  <div id="PictureBox">
    <!-- 有图模式 -->
    <template v-if="config.width != 0">
      <!-- 左侧内容 -->
      <div class="left" v-if="config.cover" :style="{
        'margin-right': (config.marginLeft ? config.marginLeft : configs.marginLeft) + 'px'
      }">
        <div class="image" :style="{
          'width': (config.width ? config.width : configs.width) + 'px',
          'height': (config.height ? config.height : configs.height) + 'px',
          'background-image': 'url(' + (config.defaultImage ? config.defaultImage : configs.defaultImage) + ')'
        }" @click="onImageClick()">
          <slot name="left">
            <img :src="imageWebUrl + config.cover" @error="$event.target.src = GLOBAL.defaultCover">
            <!-- {{config.imgUrl}} -->
          </slot>
        </div>
      </div>
      <!-- 右侧内容 -->
      <div class="right">
        <slot/>
      </div>
    </template>
    <!-- 无图模式 -->
    <template v-else>
      <div class="right">
        <slot/>
      </div>
    </template>
  </div>
</template>

<script>
const configs = {
  defaultImage: require('@/assets/image/default2.png'), // 错误图片替换地址
  imgUrl: require('@/assets/image/default2.png'), // 图片地址
  width: 200, // 图片的宽
  height: 200, // 图片的高
  marginLeft: 30 // 图片距离右侧的间隙
}
export default {
  props: {
    config: {
      type: Object,
      default: ()=>configs
    }
  },
  data(){
    return {
      configs
    }
  },
  methods: {
    onImageClick(){
      this.$emit('imageClick', '')
    }
  }
}
</script>

<style lang="less" scoped>
#PictureBox{
  display: flex;
  flex-direction: row;
  .left{
    .image{
      background-position: center;
      background-size: cover;
      overflow: hidden;
      cursor: pointer;
      img{
        width: 100%;
        height: 100%;
        transition: transform 0.5s linear;
      }
      img:hover{
        // width: 110%;
        // height: 110%;
        transform:scale(1.1,1.1)
      }
    }
  }
  .right{
    flex: 1;
  }
}
</style>